import './Account.css'
import systemApi from '../../../API/systemApi';
import { useRef, useEffect, useState } from 'react';
import {
  Form,

  Input,
  Select,
  Button,
  Image, Upload,

  Message,
  Space

} from '@arco-design/web-react';
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const Account = () => {
  const formRef = useRef();
  const [size, setSize] = useState('default');
  const [fileList, setFileList] = useState([]);

  const onChange = (files) => {
    setFileList(files);
  };

  const onProgress = (file) => {
    setFileList((files) => {
      return files.map((x) => (x.uid === file.uid ? file : x));
    });
  };
  useEffect(() => {
    // showPage()
    formRef.current.setFieldsValue({
      rate: 5,
    });
  }, []);
  // const showPage = () => {
  //   // let userId=6
  //   // let id=sessionStorage.getItem('userId')
  //   systemApi.getAccount().then((res) => {
  //     console.log(res);
  //   })
  // }
  const onValuesChange = (changeValue, values) => {
    console.log('onValuesChange: ', changeValue, values);
  };
  //地区连动
  const data = {
    北京: ['海淀', '潮阳', '昌平'],
    四川: ['成都', '绵阳', '阿坝'],
    广东: ['广州', '深圳', '汕头'],
  };
  const provinces = Object.keys(data);
  const defaultProvince = provinces[0];
  const [province, setProvince] = useState(defaultProvince);
  const [cities, setCities] = useState([]);
  const [city, setCity] = useState('');
  useEffect(() => {
    const cities = data[province] || [];
    setCities(cities);
    setCity(cities[0]);
  }, [province]);

  return <div style={{ background: 'white' }}>
    <p className='floot'>基本设置</p>
    <div className='maxBox' style={{ color: 'black', width: '100%', backgroundColor: 'white', marginLeft: '60px' }} className=''>
      <div className='boxLeft'>
        <Form
          style={{ width: '100%', display: 'flex' }}
          ref={formRef}
          {...formItemLayout}
          size={size}
          initialValues={{
            slider: 20,
            'a.b[0].c': ['b'],
          }}
          onValuesChange={onValuesChange}
          scrollToFirstError
          layout='vertical'
        >
          <div className='from-first'>
            <FormItem
              label='登录账号'
              field='userPhone'
              disabled
            >
              <Input placeholder='8971316546' />
            </FormItem>
            <FormItem label='账号角色' field='age' disabled >
              <Input placeholder='超级管理员' />
            </FormItem>
            <FormItem label='上次登录时间' field='userLastLoginTime' disabled >
              <Input placeholder='20022-06-28  21:09:50' />
            </FormItem>

            <FormItem label='所属省市' field='post' span={16} >
              <Space size='large'>
                <Select
                  placeholder='Select Province'
                  style={{ width: 130,marginRight:'100px' }}
                  onChange={(value) => setProvince(value)}
                  defaultValue={province}
                >
                  {provinces.map((option, index) => (
                    <Option key={index} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
                <Select
                  placeholder='Select city'
                  style={{ width: 130 }}
                  onChange={(value) => setCity(value)}
                  value={city}
                >
                  {cities.map((option, index) => (
                    <Option key={index} value={option}>
                      {option}
                    </Option>
                  ))}
                </Select>
              </Space>
            </FormItem>

            <FormItem label='详细地址' field='dizi'>
              <Input placeholder='四川成都'/>
            </FormItem>

            <FormItem label='联系电话' field='userPhone'>
              <Input placeholder='17361322387'/>
            </FormItem>


            <FormItem style={{ textAlign: 'left', marginTop: '30px' }}>
              <Button
                onClick={async () => {
                  if (formRef.current) {
                    try {
                      await formRef.current.validate();
                      Message.info('pass verification, submit succeed!');
                    } catch (_) {
                      console.log(formRef.current.getFieldsError());
                      Message.error('verification failed, Please check the fields!');
                    }
                  }
                }}
                type='primary'
              >
                更新信息
              </Button>

            </FormItem>
          </div>



        </Form>
      </div>
      <div className='boxRight'>
        <FormItem label='头像' layout='vertical' labelCol={{ span: 5, offset: 1 }} wrapperCol={{ span: 10, offset: 1 }}>
          <Image
            style={{ borderRadius: '50%' }}
            width={160}
            preview
            src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
            alt='lamp'
          />
        </FormItem>
        <Upload

          multiple
          autoUpload={false}
          action='/'
          onChange={onChange}
          onProgress={onProgress}
          fileList={fileList}
        />
      </div>


    </div>


  </div>

}
export default Account